<!DOCTYPE html>
<html lang="en">
	<head>
		<title>用户管理</title>
		<#include "../../inc/header.ftl"/>
	</head>

	<body class="no-skin">

		<div class="main-container ace-save-state" id="main-container">

			<div class="main-content">
				<div class="main-content-inner">

					<div class="page-content">
						<div class="row">
							<div id="aaa" class="col-xs-12 col-sm-3" style="padding-right: 0;">
								<div id="LeftTree"></div>
							</div>
							<div id="grid-main-data" class="col-xs-12 col-sm-9">
                                <table id="MainGrid" style="min-height: 500px"></table>
								<div id="toolbar">
									<div style="padding:8px">
										用户编码：<input id="s_userCode" class="easyui-textbox" style="width:140px">&emsp;
										<a href="#" onclick="javascript:searchInfo(0)" class="easyui-linkbutton" iconCls="icon-search">查 询</a>
									</div>
									<div style="padding:8px 8px 4px">
										<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="javascript:addInfo()">增加</a>
										<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="javascript:editInfo()">修改</a>
										<a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="javascript:deleteInfo()">删除</a>
										<a href="#" class="easyui-linkbutton" iconCls="icon-more" onclick="javascript:menuInfo()">菜单设置</a>
									</div>
								</div>
							</div>
						</div><!-- /.row -->
					</div><!-- /.page-content -->

					<div id="box-add" class="ui-dialog-content hide">
						<form class="form-horizontal" id="form-add" method="post">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">用户编码</label>

								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input type="text" name="userId" id="userId" hidden />
										<input type="text" name="userCode" id="userCode" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</span>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">用户名称</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="userName" id="userName" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">密码</label>
								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input type="text" name="userPwd" id="userPwd" class="col-xs-12 easyui-passwordbox" data-options="required:true" style="width:100%" />
									</span>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">角色</label>
								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input id="role" name="role" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</span>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">行政区划</label>
								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
                                        <input type="text" name="cantonId" id="cantonId" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</div>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">网点</label>
								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input type="text" name="bankStationId" id="bankStationId" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</span>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">是否启用</label>
								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<select id="isEnable" class="easyui-combobox" name="isEnable" data-options="required:true" style="width:100%;">
											<option value="1" selected>启用</option>
											<option value="2">停用</option>
										</select>
									</span>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">允许修改密码</label>
								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input class="easyui-checkbox" id="chgpwd" value="1">
									</span>
								</div>

							</div>
						</form>
					</div><!-- #dialog-confirm -->
                    <div id="box-menuadd" class="ui-dialog-content hide">
                        <form class="form-horizontal" id="form-menuadd" method="post">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">用户编码</label>

								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input type="text" name="uscode" id="uscode" class="col-xs-12 easyui-textbox" readonly style="width:100%" />
									</span>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">用户名称</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="usname" id="usname" class="col-xs-12 easyui-textbox" readonly style="width:100%" />
									</div>
								</div>
							</div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-2 no-padding-right">可用菜单</label>
                                <div class="col-xs-12 col-sm-10">
                                    <input type="hidden" id="menuId" name="menuId">
                                    <div class="clearfix" style="overflow: auto;height: 248px;border: 1px solid #D4D4D4;">
                                        <ul type="text" id="menuTree" class="col-xs-12" style="width:100%" />
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div><!-- #dialog-confirm -->
					<div id="box-userbankadd" class="ui-dialog-content hide">
						<form class="form-horizontal" id="form-userbankadd" method="post">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">用户编码</label>

								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input type="text" name="usco" id="usco" class="col-xs-12 easyui-textbox" readonly style="width:100%" />
									</span>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">用户名称</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="usna" id="usna" class="col-xs-12 easyui-textbox" readonly style="width:100%" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">可用银行</label>
								<div class="col-xs-12 col-sm-10">
									<input type="hidden" id="bankId" name="bankId">
									<div class="clearfix" style="overflow: auto;height: 248px;border: 1px solid #D4D4D4;">
										<ul type="text" id="bankTree" class="col-xs-12" style="width:100%" />
									</div>
								</div>
							</div>
						</form>
					</div><!-- #dialog-confirm -->
				</div>
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->
		<#include "../../inc/basicjs.ftl"/>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">

			jQuery(function($) {
				// 右侧表格
				$('#MainGrid').datagrid({
					url: prefix + '/sys/user/listUser',
					pagination: true,
					fitColumns:false,
					striped: true,
					singleSelect: true,
					loadMsg: "正在加载数据，请稍后...",
					queryParams: {state: -1},
					columns:[[
						{title:'用户编码',field:'userCode',width:100},
						{title:'用户名称',field:'userName',width:130},
                        {title:'状态',field:'state',width:60,formatter: function(value,row,index){
                                if(value==1){
                                    return "正常"
                                }else{
                                    return "禁用";
                                }
                            }},
                        {title:'角色',field:'roleName',width:160},
						{title:'行政区划',field:'cantonname', width:160,formatter: function(value,row,index){return row.cantoncode+"-"+row.cantonname}},
						{title:'所属网点',field:'bankStationName', width:300},
					]],
					toolbar: '#toolbar'
				});

				$(window).resize(function() {
					// $('#LeftTree').datatree({height: $(window).height() - 30});
					$('#MainGrid').datagrid('resize');
				});

                //---区划三级下拉框
                $('#LeftTree').tree({
                    url:prefix+'/base/basedata/findCantonMapInStation',
                    required: true,
                    width: 200,
                    onClick: function(node){
                        $('#s_userCode').textbox('setValue', '');
				        searchInfo(1);
                    }
                });
                $('#cantonId').combotree({
                    url:prefix+'/base/basedata/findCantonMapInStation',
                    required: true,
                    width: 200,
                    onChange: function(newValue, oldValue) {
                        if (newValue == '') return;
                        // 网点下拉框
                        $('#bankStationId').combobox({
                            url:prefix + '/base/basedata/findBankStation?cantonid=' + newValue,
                            valueField:'bankstationid',
                            textField:'bankstationname',
                            editable: false,
                            onLoadSuccess:function (data) {
                                if (data != null && data.length > 0) $('#bankStationId').combobox('setValue',data[0].bankstationid);
                            }
                        });
                    }
                });
                $('#menuTree').tree({
                    url: prefix + '/sys/menu/listMenu',
                    loadFilter: function(data) {
                        return getMenuTree(data.rows, '0');
                    },
                    checkbox: true,
                    cascadeCheck: true,
                });

                // 角色下拉框
                $('#role').combobox({
                    url:prefix + '/sys/role/listAllRole',
                    valueField:'roleId',
                    textField:'roleName',
                    editable: false
                });
                $('#chgpwd').checkbox({
                    onChange: function(checked) {
                        $('#userPwd').passwordbox('readonly', !checked);
                        if (!checked) {
                            $('#userPwd').passwordbox('setValue', '******');
                        }
                    }
                });
            });
            // 查询
			function searchInfo(opt) {
				var id = 0;
                if (opt == 1) {
                    var row = $('#LeftTree').tree('getSelected');
                    if (row != null) {
                        id = row.id;
                    }
                }

				$('#MainGrid').datagrid('load',{
                    cantonId: id,
					userCode: $('#s_userCode').val()
				});
			}
            // 新增
			function addInfo() {
				$('#form-add').form('clear');
                var row = $('#LeftTree').tree('getSelected');
                if (row != null) {
                    $('#cantonId').combotree('setValue', row.id);
                }
                $('#userPwd').passwordbox('readonly',false);
                $('#chgpwd').checkbox('check');
                $('#chgpwd').checkbox('disable');
                showForm(1);
			}
            // 修改
			function editInfo() {
				var row = $('#MainGrid').datagrid('getSelected');
				if (row == null) {
					$.messager.alert('提示', '请选择要编辑的数据', 'info');
					return;
				}
                $('#form-add').form('load', row);
                $('#role').combobox('setValue', row.role);
                $('#bankStationId').combobox('setValue', row.bankStationId);
                $('#userPwd').passwordbox('readonly',true);
                $('#chgpwd').checkbox('enable');
                $('#chgpwd').checkbox('uncheck');
                showForm(2);
			}
			function showForm(opt) {
				var tit = (opt == 1) ? '添加用户' : '编辑用户';
				$( "#box-add" ).removeClass('hide').dialog({
					title: '&nbsp;' + tit,
					iconCls:'icon-add',
					width: 700,
					height: 400,
					modal: true,
					buttons:[{
						text:'保存',
						iconCls:'icon-ok',
						width:80,
						plain:false,
						handler:function(){
							saveInfo(opt);
						}
					},{
						text:'取消',
						iconCls:'icon-cancel',
						width:80,
						plain:false,
						handler:function(){$('#box-add').dialog('close')}
					}]
				});
			}

            // 保存用户
            function saveInfo(opt) {
				var url = (opt == 1) ? '/sys/user/addUser' : '/sys/user/saveUser';
				$('#form-add').form({
					url: prefix + url,
					onSubmit:function(param){
						var isValid = $(this).form('validate');
						if (isValid){
							$.messager.progress({
								title: '提示',
								msg: '数据处理中，请稍候……',
								text: ''
							});
						}
						return isValid;
					},
					success:function(data) {
						$.messager.progress('close');
						var data = eval('(' + data + ')');
						if (data.success) {
							searchInfo(1);
							$('#box-add').dialog('close');
						} else {
							$.messager.alert('提示', data.msg, 'info');
						}
					}
				});
				$('#form-add').submit();
			}

			function deleteInfo() {
				var row = $('#MainGrid').datagrid('getSelected');
				if (row == null) {
					$.messager.alert('提示', '请选择要删除的数据', 'info');
					return;
				}
				$.messager.confirm('提示', '确定要删除角色[' + row.userName + ']吗？', function(r){
					if (!r) {
						$.ajax({
							url: prefix + '/sys/user/deleteUser',
							type: 'POST',
							data: {userId: row.userId},
							dataType: 'json',
							success:function(data){
								if(data.success) {
									searchInfo(1);
								}else {
									$.messager.alert('提示', data.msg, 'info');
								}
							}
						});
					}
				});
			}

            function getMenuTree(data, parentId) {
                var chd = [];
                for (var i=0;i<data.length;i++) {
                    if (data[i]['parentId'] == parentId) {
                        var sub = getMenuTree(data, data[i]['menuId']);
                        var node = {id: data[i]['menuId'], text: data[i]['menuName']};
                        if (sub.length > 0) node['children'] = sub;
                        chd.push(node);
                    }
                }
                return chd;
            }

            function treeCheckedBank() {
                var _tree = $('#bankTree');
                var ids = ',' + $("#bankId").val() + ',';
                var roots = _tree.tree('getRoots');//返回tree的所有根节点数组
                traverseTreeBank(_tree, roots, ids);
            }
            function traverseTreeBank(_tree,parent,ids){
                if (typeof(parent) == 'undefined'){
                    return;
                }
                for ( var i = 0; i < parent.length; i++) {
                    var node = parent[i];
                    if (ids.indexOf(',' + node.id + ',') >= 0) {
                        _tree.tree('check', node.target);//将得到的节点选中
                    } else {
                        _tree.tree('uncheck', node.target);//将得到的节点选中
                    }
                }
            }
            function userInfo(index) {
                $("#MainGrid").datagrid("selectRow",index);
                var rowuser = $('#MainGrid').datagrid('getSelected');
                $("#usco").textbox('setValue',rowuser.userCode);
                $("#usna").textbox('setValue',rowuser.userName);
                $('#form-userbankadd').form('load',rowuser);
                treeCheckedBank();
                $( "#box-userbankadd" ).removeClass('hide').dialog({
                    title: '&nbsp;账号配置',
                    iconCls:'icon-add',
                    width: 600,
                    height: 400,
                    modal: true,
                    buttons:[{
                        text:'保存',
                        iconCls:'icon-ok',
                        width:80,
                        plain:false,
                        handler:function(){
                            userBankInfo(rowuser.userId);
                        }
                    },{
                        text:'取消',
                        iconCls:'icon-cancel',
                        width:80,
                        plain:false,
                        handler:function(){$('#box-userbankadd').dialog('close')}
                    }]
                });
            }

            function bankIds() {
                var banktree = $('#bankTree').tree('getChecked');
                var s = '';
                for (var i=0;i<banktree.length;i++) {
                    s = s + ',' + banktree[i].id;
                }
                $("#bankId").val(s);
            }

            function userBankInfo(id) {
                $('#form-userbankadd').form({
                    url: prefix + '/sys/user/editBankUserId',
                    onSubmit:function(param){
                        bankIds();
                        param.userId=id;
                        var isValid = $(this).form('validate');
                        if (isValid){
                            $.messager.progress({
                                title: '提示',
                                msg: '数据处理中，请稍候……',
                                text: ''
                            });
                        }
                        return isValid;
                    },
                    success:function(data) {
                        $.messager.progress('close');
                        var data = eval('(' + data + ')');
                        if (data.success) {
                            searchInfo(1);
                            $('#box-userbankadd').dialog('close');
                        } else {
                            $.messager.alert('提示', data.msg, 'info');
                        }
                    }
                });
                $('#form-userbankadd').submit();
            }

            function menuInfo() {
				var row = $('#MainGrid').datagrid('getSelected');
				if (row == null) {
					$.messager.alert('提示', '请选择要编辑的数据', 'info');
					return;
				}
                $("#uscode").textbox('setValue',row.userCode);
                $("#usname").textbox('setValue',row.userName);
                $("#menuId").val(row.menuId);
                menuForm(row.userId);
            }


            function menuForm(userId) {
                treeChecked();
                $( "#box-menuadd" ).removeClass('hide').dialog({
                    title: '&nbsp;菜单配置',
                    iconCls:'icon-add',
                    width: 600,
                    height: 400,
                    modal: true,
                    buttons:[{
                        text:'保存',
                        iconCls:'icon-ok',
                        width:80,
                        plain:false,
                        handler:function(){
                            menuEditInfo(userId);
                        }
                    },{
                        text:'取消',
                        iconCls:'icon-cancel',
                        width:80,
                        plain:false,
                        handler:function(){$('#box-menuadd').dialog('close')}
                    }]
                });
            }
            function menuEditInfo(userId) {
                $('#form-menuadd').form({
                    url: prefix + '/sys/user/editMenuUser',
                    onSubmit:function(param){
                        param.userId = userId;
                        getChecked();
                        var isValid = $(this).form('validate');
                        if (isValid){
                            $.messager.progress({
                                title: '提示',
                                msg: '数据处理中，请稍候……',
                                text: ''
                            });
                        }
                        return isValid;
                    },
                    success:function(data) {
                        $.messager.progress('close');
                        var data = eval('(' + data + ')');
                        if (data.success) {
                            $('#box-menuadd').dialog('close');
                        } else {
                            $.messager.alert('提示', data.msg, 'info');
                        }
                    }
                });
                $('#form-menuadd').submit();
            }
            function getChecked() {
                var nodes = $('#menuTree').tree('getChecked');
                var s = '';
                for (var i=0;i<nodes.length;i++) {
                    var p = $('#menuTree').tree('getParent', nodes[i].target);
                    while(p) {
                        if (!p.checked) {
                            $('#menuTree').tree('check', p.target);
                            s = s + ',' + p.id;
                        }
                        p = $('#menuTree').tree('getParent', p.target);
                    }
                    s = s + ',' + nodes[i].id;
                }
                $("#menuId").val(s);
            }
            function treeChecked() {
                var _tree = $('#menuTree');
                var ids = ',' + $("#menuId").val() + ',';
                var roots = _tree.tree('getRoots');//返回tree的所有根节点数组
                traverseTree(_tree, roots, ids);
            }
            function traverseTree(_tree,parent,ids){
                if (typeof(parent) == 'undefined'){
                    return;
                }
                for ( var i = 0; i < parent.length; i++) {
                    var node = parent[i];
                    if (ids.indexOf(',' + node.id + ',') >= 0) {
                        _tree.tree('check', node.target);//将得到的节点选中
                    } else {
                        _tree.tree('uncheck', node.target);//将得到的节点选中
                    }
                    var children = _tree.tree('getChildren', node.target);
                    if (children) {
                        traverseTree(_tree, children, ids);
                    }
                }
            }



		</script>
	</body>
</html>
